<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

<!-- Mobile Devices Support @begin1 -->

<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- apple devices fullscreen -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/jQuery.js"></script>
	<title>{$title}</title>
</head>
<style>
	*{
		padding:0px;
		margin: 0px;
		font-family: '微软雅黑';
		font-size: 13px;
	}
	ul
	{
		list-style: none;
	}
	.main
	{
		background: black;
		width: 100%;
		height: 100%;

	}
	.main .logo
	{
		margin: 0 auto;
		padding: 40px 10px 10px 10px;
		margin-bottom: 20px;
	}
	.main .logo img
	{
		width: 100%;
	}
	.main .contain
	{
		padding: 10px;
		overflow: hidden;
	}
	.main .contain li
	{
		float: left;
		width: 32%;
		position: relative;
		margin-bottom: 10px;
	}
	.main .contain li:nth-child(3n+2)
	{
		margin-left: 2%;
		margin-right: 2%;
	}
	.main .contain li:nth-child(3n + 1)
	{
		clear:both;
	}
	.main .contain li img
	{
		width:100%;
		float: left;
		
	}
	.main .contain li p
	{
		color: white;
		text-align: center;
		bottom: 0px;
		width: 100%;
		display: -webkit-box;
		height: 36px;
		overflow: hidden;
		float: left;
		padding-top: 3px;
		padding-bottom: 3px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:2;
		font-size: 14px;
	}
	.showImg
	{
		position: fixed;
		top: 0px;
		background: black;
		display: none;
		width: 100%;
		
	}
	.showImg.show img{
		
	}
	.showImg img
	{
		-webkit-transition:-webkit-transform .4s;
		width: 100%;
		-webkit-transform: scale(0,0);
		top: 50%;
		position: relative;
	}
</style>

<body>
	<div class="main">
		<notempty name="MainArticles[0]['picurl'][0]">
			<div class="logo">
				<img src="{$MainArticles[0].picurl}" alt="">
			</div>
		</notempty>
		<ul class="contain">
			<volist name="ModuleArticles" id="m">
				<li>
					<img src="{$m.picurl}" data-src="{$m.url}" alt="">
					<empty name ="m.color">
						<p>{$m.title}</p>
					<else />
						<p style="color:{$m.color}">{$m.title}</p>
					</empty>
				</li>
			</volist>
		</ul>
		<notempty name="MainArticles[1]['picurl'][0]">
			<div class="logo">
				<img src="{$MainArticles[1].picurl}" alt="">
			</div>
		</notempty>
	</div>
	<div class="showImg">
		<img src="" alt="">
	</div>
</body>
<script type="text/javascript">

	function initheight(){
		var h = $(window).height(),
			h1 = $('body').height();
		$('.showImg').css({
			"height": h
		});
		if (h < h1) {
			h = h1;
		} else {

		}
		$('.main').css({
			"height": h
		});
	}
	window.onload=initheight;
	
	$(function(){

		var sTime,hTime;
		$('.contain li').on('click',function(){
			// 有data-src则跳转，否则显示大图
			link = $(this).find('img').attr('data-src');
			if (link) {
				location.href = link;
				return;
			}
			window.clearTimeout(sTime);
			var src=$(this).find('img').attr('src');
			$('.showImg').find('img').attr('src',src);
			var h;
			$('.showImg').find('img').bind('load',function(){
				h=$(this).height();
				$(this).css({
					"margin-top":"-"+h/2+"px"
				});
			});

			$('.showImg').find('img').css({
				"margin-top":"-"+h/2+"px"
			});
			$('.showImg').show();
		
			sTime=setTimeout(function(){
				$('.showImg').find('img').css({
					"-webkit-transform":"scale(1,1)"
				});
			},10);
			
			
		});
		$('.showImg').on('click',function(){
			window.clearTimeout(sTime);
			$(this).find('img').css({
				"-webkit-transform":"scale(0,0)"
			});

			sTime=setTimeout(function(){
				$('.showImg').hide();
			},300);
			
		});
	});
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
<script type="text/javascript">
	wx_share.init({
		"title":"{$title}",
		"desc":'{$shareinfo}',
		"link":location.href,
		"imgUrl": '{$sharepicurl}',
		"pkg":{
			"appId": '{$pkg.appId}',
			"timestamp": '{$pkg.timestamp}',
			"nonceStr": '{$pkg.nonceStr}',
			"signature": '{$pkg.signature}'
		},
		success:function(config,shareType){
		}
	});
</script>
</html>